{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" @renderInPlace={{true}} as |D|>
  <D.Trigger data-test-version-dropdown class="toolbar-link {{if D.isOpen ' is-active'}}">
    Version
    {{or @displayVersion "current"}}
    <Chevron @direction="down" @isButton={{true}} />
  </D.Trigger>
  <D.Content @defaultClass="popup-menu-content">
    <nav class="box menu">
      <ul class="menu-list">
        {{#each @metadata.sortedVersions as |versionData|}}
          <li data-test-version={{versionData.version}}>
            {{#if @onSelect}}
              {{! TODO use Hds::Dropdown instead https://helios.hashicorp.design/components/dropdown }}
              <button
                disabled={{or versionData.destroyed versionData.isSecretDeleted}}
                {{on "click" (fn @onSelect versionData.version D.actions)}}
                type="button"
                class="link {{if (loose-equal versionData.version @displayVersion) 'is-active'}}"
              >
                Version
                {{versionData.version}}
                {{#if versionData.destroyed}}
                  <Icon @name="x-square-fill" class="has-text-danger is-pulled-right" />
                {{else if versionData.isSecretDeleted}}
                  <Icon @name="x-square-fill" class="has-text-grey is-pulled-right" />
                {{else if (loose-equal versionData.version @metadata.currentVersion)}}
                  <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                {{/if}}
              </button>
            {{else}}
              <LinkTo @query={{hash version=versionData.version}} {{on "click" (fn @onClose D)}}>
                Version
                {{versionData.version}}
                {{#if versionData.destroyed}}
                  <Icon @name="x-square-fill" class="has-text-danger is-pulled-right" />
                {{else if versionData.isSecretDeleted}}
                  <Icon @name="x-square-fill" class="has-text-grey is-pulled-right" />
                {{else if (loose-equal versionData.version @metadata.currentVersion)}}
                  <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                {{/if}}
              </LinkTo>
            {{/if}}
          </li>
        {{/each}}
      </ul>
    </nav>
  </D.Content>
</BasicDropdown>